<template>
  <div class="app-container">
    <h2>结算数据类型</h2>
    <hr />
    <div class="main">
      <div class="controlDiv">
        <el-row class="demo-autocomplete">
          <el-autocomplete class="inline-input" v-model="inputState" :fetch-suggestions="querySearch" placeholder="请输入结算类别编码或名称"></el-autocomplete>
          <el-button type="primary" class="firstButton" @click="selectInfo()">查询结算类别</el-button>
          <el-button type="primary" @click="dialogVisible = true">新增结算类别</el-button>
        </el-row>
      </div>
      <div class="listDiv">
        <el-table :data="tableData" border>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="显示顺序号" prop="sequenceNo">
          </el-table-column>
          <el-table-column label="类别编码" prop="settleCode">
          </el-table-column>
          <el-table-column label="类别名称" prop="settleName">
          </el-table-column>
          <el-table-column label="编码" prop="id">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--编辑按钮-->
              <el-button type="primary" icon="el-icon-edit" :modal="scope" size="small" @click="modifyUser(scope.$index, scope.row)"></el-button>
              <!--删除按钮-->
              <el-button type="danger" icon="el-icon-delete" size="small" circle @click="deleOne(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 增加用户 -->
      <el-dialog title="新增结算类别" :visible.sync="dialogVisible">
        <br />
        <el-form :model="addSgoryFrom" label-width="100px">
          <el-form-item label="类别编码">
            <el-input v-model="addSgoryFrom.newSettleCode" placeholder="类别编码"></el-input>
          </el-form-item>
          <el-form-item label="类别名称">
            <el-input v-model="addSgoryFrom.newSettleName" placeholder="类别名称"></el-input>
          </el-form-item>
          <el-form-item label="显示顺序号">
            <el-input v-model="addSgoryFrom.newSequenceNo" placeholder="显示顺序号"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addNewSgory()">保存</el-button>
        </div>
      </el-dialog>
      <!-- 修改用户 -->
     <el-dialog title="修改结算类别" :visible.sync="updateDialogVisible" :close-on-click-modal="false" @closed="selectInfo()">
        <el-form :model="modifyPage" label-width="100px">
          <el-form-item label="类别编码">
            <el-input v-model="modifyPage.SettleCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类别名称">
            <el-input v-model="modifyPage.SettleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="显示顺序号">
            <el-input v-model="modifyPage.SequenceNo" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="modifyPage.id" autocomplete="off"></el-input>
          </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doModifyUser()">修 改</el-button>
          </div>
      </el-dialog>
      <div class="pageControlDiv">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[2, 5, 10, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="parseInt(total)">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    mounted() {
      /* 获取初始数据集 */
      this.$axios.post("/his/sys/getSgorySelectList", {
          keyString: ''
        })
        .then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.departmentsList.push({
              'value': response.data[i].SequenceNo,
            })
          }
        })
      /* 获取初始列表条目数 */
      this.$axios.post("/his/sys/getSgoryCount", {
          keyString: ''
        })
        .then(response => {
          this.total = response.data
        })
      /* 获取初始列表 */
      this.$axios.post("/his/sys/getSgory", {
          pages: this.currentPage,
          rowsPerPage: this.pageSize,
          keyString: ''
        })
        .then(response => {
          this.tableData = response.data;
        })
    },
    data() {
      return {
        tableData: [],
        // 条件输入框联想数据集
        departmentsList: [],
        // 条件输入框内容
        inputState: '',
        // 分页用数据-当前请求页面
        currentPage: 1,
        // 分页用数据-页面规格
        pageSize: 10,
        // 分页用数据-结果集行数总计
        total: 0,
        //表单用数据
        input: '',
        dialogVisible: false,
        updateDialogVisible:false,
        addSgoryFrom: {
          newSettleCode: '',
          newSettleName: '',
          newSequenceNo: ''

        },
        modifyPage: {
          SettleCode: '',
          SettleName: '',
          SequenceNo: '',
          id:''
        },
      }
    },
    methods: {
      //增加
      addNewSgory() {
        this.$axios.post("/his/sys/addSgory", {
            settleCode: this.addSgoryFrom.newSettleCode,
            settleName: this.addSgoryFrom.newSettleName,
            sequenceNo: this.addSgoryFrom.newSequenceNo
          })
          .then(response => {
            alert(response.data);
          })
        this.dialogVisible = false;
      },
      //返回建议列表的数据
      querySearch(queryString, cb) {
        var departmentsList = this.departmentsList;
        var results = queryString ? departmentsList.filter(this.createFilter(queryString)) : departmentsList;
        cb(results);
      },
      //匹配规则：1任意匹配0起始匹配
      createFilter(queryString) {
        return (inText) => {
          return (inText.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      //查询
      selectInfo() {
        /* 获取列表条目数 */
        this.$axios.post("/his/sys/getSgoryCount", {
            keyString: this.inputState,
          })
          .then(response => {
            this.total = response.data
          })
        /* 获取列表 */
        this.$axios.post("/his/sys/getSgory", {
            keyString: this.inputState,
            pages: this.currentPage,
            rowsPerPage: this.pageSize
          })
          .then(response => {
            this.tableData = response.data;
          })
      },
      //页面规格改变
      handleSizeChange(newSize) {
        this.pageSize = newSize
        this.selectInfo();
      },
      // 页码改变
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        this.selectInfo();
      },
      //修改结算-弹窗数据初始化
      modifyUser(index, row) {
        this.modifyPage.id = this.tableData[index].id;
        this.modifyPage.SettleCode = this.tableData[index].settleCode;
        this.modifyPage.SettleName = this.tableData[index].settleName;
        this.modifyPage.SequenceNo = this.tableData[index].sequenceNo;
        this.updateDialogVisible = true;
      },
      //修改结算-执行
      doModifyUser() {
        let _this = this;
        this.$axios.post("/his/sys/updateNewSgory",{
          id:_this.modifyPage.id,
          settleCode:_this.modifyPage.SettleCode,
          settleName:_this.modifyPage.SettleName,
          sequenceNo:_this.modifyPage.SequenceNo,
        })
          .then(function(response){
            // _this.modifyPage = response.data;
            _this.updateDialogVisible = false;
          })
      },
      //删除一行
      deleOne(index,row){
        this.$axios.post("/his/sys/deleteSgory",{
          id:this.tableData[index].id
        })
        .then(response =>{
          this.selectInfo();
        })
      }
    }
  }
</script>

<style>
  .main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }

  .main .controlDiv {
    width: 90%;
    margin-bottom: 10px;
  }

  .main .listDiv {
    width: 90%;
  }

  .firstButton {
    margin-left: 10px;
  }

  .main .pageControlDiv {
    margin-top: 30px;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
</style>
